import { Tabs } from 'nextra/components'
import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'
import VersionBadge from '@/components/VersionBadge'

# Core Features

<BadgeGroup values={[UniverTypes.SHEET, UniverTypes.DOC]} value={UniverTypes.SHEET} />

Core packages implement the basic functions of the spreadsheet, including the core functions of Univer Sheet, such as creating workbooks, cell editing, cell selection, and formulas.

## Installation

<Tabs items={['pnpm', 'npm']}>
  <Tabs.Tab label="pnpm">
    ```shell
    pnpm add @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui
    ```
  </Tabs.Tab>
  <Tabs.Tab label="npm">
    ```shell
    npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui
    ```
  </Tabs.Tab>
</Tabs>

## Import

```typescript
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";

import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";

import { UniverUIPlugin } from "@univerjs/ui";

import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";

import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
```

## Internationalization

```typescript
import { LocaleType, Tools } from '@univerjs/core';
import DesignEnUS from '@univerjs/design/locale/en-US';
import DocsUIEnUS from '@univerjs/docs-ui/locale/en-US';
import SheetsEnUS from '@univerjs/sheets/locale/en-US';
import SheetsUIEnUS from '@univerjs/sheets-ui/locale/en-US';
import SheetsFormulaEnUS from '@univerjs/sheets-formula/locale/en-US';
import UIEnUS from '@univerjs/ui/locale/en-US';

const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      DesignEnUS,
      DocsUIEnUS,
      SheetsEnUS,
      SheetsUIEnUS,
      SheetsFormulaEnUS,
      UIEnUS
    ),
  },
});
```

## Register

```typescript
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);

univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
});

univer.registerPlugin(UniverDocsPlugin, {
  hasScroll: false,
});
univer.registerPlugin(UniverDocsUIPlugin);

univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);

univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});
```

## Configuration

### `@univerjs/core`

`@univerjs/core` provides some configuration options that can be used to configure the theme, internationalization, etc.

```typescript
new Univer({
  theme: IStyleSheet;
  locale: LocaleType;
  locales: ILocales;
  logLevel?: LogLevel;
});
```

For a complete list of configuration options, see [IUniverData](/typedoc/@univerjs/core/interfaces/IUniverData).

### `@univerjs/ui`

`@univerjs/ui` provides some configuration options that can be used to configure the basic layout.

```typescript
univer.registerPlugin(UniverUIPlugin, {
  container?: string | HTMLElement;

  header?: boolean;
  footer?: boolean;
  contextMenu?: boolean;
});
```

* `container` - Container element, can be a string or DOM element.
* `header` - Whether to display the header.
* `toolbar` - Whether to display the header toolbar.  <VersionBadge version="0.1.18+" />
* `footer` - Whether to display the footer.
* `contextMenu` - Whether to display the right-click menu.
